<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
    <style>
        .search-bar {
            margin-bottom: 20px;
        }
        .project-table th {
            white-space: nowrap;
        }
        .pagination-info {
            font-size: 14px;
            color: #666;
        }
        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-applying {
            background-color: #f8d7da;
            color: #721c24;
        }
        .status-applied {
            background-color: #d4edda;
            color: #155724;
        }
        .status-inprogress {
            background-color: #cce5ff;
            color: #004085;
        }
        .status-completed {
            background-color: #e2e3e5;
            color: #383d41;
        }
        .action-buttons {
            white-space: nowrap;
        }
        .action-buttons button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-3">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">项目管理</h5>
                        <div>
                            <button class="btn btn-success btn-sm" id="exportExcel">
                                <i class="fas fa-file-excel mr-1"></i>导出Excel
                            </button>
                            <button class="btn btn-primary btn-sm ml-2" id="addProject">
                                <i class="fas fa-plus mr-1"></i>新增项目
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="search-bar">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="项目名称/项目编号/负责人">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex justify-content-end">
                                        <select class="form-control form-control-sm mr-2" style="width: auto;">
                                            <option>项目状态</option>
                                            <option>申报中</option>
                                            <option>已申报</option>
                                            <option>在建项目</option>
                                            <option>已结项</option>
                                        </select>
                                        <select class="form-control form-control-sm" style="width: auto;">
                                            <option>建设部门</option>
                                            <option>信息技术部</option>
                                            <option>运营部</option>
                                            <option>财务部</option>
                                            <option>人力资源部</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover project-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="40">
                                            <input type="checkbox" id="selectAll">
                                        </th>
                                        <th>项目名称</th>
                                        <th>项目编号</th>
                                        <th>建设部门</th>
                                        <th>项目状态</th>
                                        <th>项目负责人</th>
                                        <th>创建时间</th>
                                        <th>项目预算(万元)</th>
                                        <th>中标价(万元)</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" class="select-item"></td>
                                        <td>OA系统升级项目</td>
                                        <td>PRJ2023001</td>
                                        <td>信息技术部</td>
                                        <td><span class="status-badge status-inprogress">在建项目</span></td>
                                        <td>张三</td>
                                        <td>2023-01-15</td>
                                        <td>120.00</td>
                                        <td>105.80</td>
                                        <td class="action-buttons">
                                            <a href="view/view.html?id=PRJ2023001&mode=view" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                            <a href="view/view.html?id=PRJ2023001&mode=edit" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-danger btn-sm delete-btn" data-id="PRJ2023001" data-name="OA系统升级项目"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="select-item"></td>
                                        <td>数据中心建设</td>
                                        <td>PRJ2023002</td>
                                        <td>信息技术部</td>
                                        <td><span class="status-badge status-applying">申报中</span></td>
                                        <td>李四</td>
                                        <td>2023-02-10</td>
                                        <td>500.00</td>
                                        <td>-</td>
                                        <td class="action-buttons">
                                            <a href="view/view.html?id=PRJ2023002&mode=view" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                            <a href="view/view.html?id=PRJ2023002&mode=edit" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-danger btn-sm delete-btn" data-id="PRJ2023002" data-name="数据中心建设"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="select-item"></td>
                                        <td>人力资源管理系统</td>
                                        <td>PRJ2023003</td>
                                        <td>人力资源部</td>
                                        <td><span class="status-badge status-applied">已申报</span></td>
                                        <td>王五</td>
                                        <td>2023-03-05</td>
                                        <td>80.00</td>
                                        <td>-</td>
                                        <td class="action-buttons">
                                            <a href="view/view.html?id=PRJ2023003&mode=view" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                            <a href="view/view.html?id=PRJ2023003&mode=edit" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-danger btn-sm delete-btn" data-id="PRJ2023003" data-name="人力资源管理系统"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="select-item"></td>
                                        <td>财务系统更新</td>
                                        <td>PRJ2022010</td>
                                        <td>财务部</td>
                                        <td><span class="status-badge status-completed">已结项</span></td>
                                        <td>赵六</td>
                                        <td>2022-10-15</td>
                                        <td>150.00</td>
                                        <td>142.50</td>
                                        <td class="action-buttons">
                                            <a href="view/view.html?id=PRJ2022010&mode=view" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                            <a href="view/view.html?id=PRJ2022010&mode=edit" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-danger btn-sm delete-btn" data-id="PRJ2022010" data-name="财务系统更新"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="select-item"></td>
                                        <td>安防监控系统</td>
                                        <td>PRJ2023004</td>
                                        <td>安全部</td>
                                        <td><span class="status-badge status-inprogress">在建项目</span></td>
                                        <td>孙七</td>
                                        <td>2023-04-20</td>
                                        <td>60.00</td>
                                        <td>58.50</td>
                                        <td class="action-buttons">
                                            <a href="view/view.html?id=PRJ2023004&mode=view" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                            <a href="view/view.html?id=PRJ2023004&mode=edit" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-danger btn-sm delete-btn" data-id="PRJ2023004" data-name="安防监控系统"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="pagination-info">
                                显示 1 到 5，共 28 条记录
                            </div>
                            <nav aria-label="Page navigation">
                                <ul class="pagination pagination-sm">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript 依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    <script>
        // 全选/取消全选
        document.getElementById('selectAll').addEventListener('change', function() {
            const isChecked = this.checked;
            document.querySelectorAll('.select-item').forEach(item => {
                item.checked = isChecked;
            });
        });

        // 导出Excel功能
        document.getElementById('exportExcel').addEventListener('click', function() {
            alert('正在导出Excel...');
            // 实际导出Excel功能需要后端支持
        });

        // 新增项目按钮
        document.getElementById('addProject').addEventListener('click', function() {
            window.location.href = 'view/view.html?mode=add';
        });
        
        // 删除按钮点击事件
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function() {
                const projectId = this.getAttribute('data-id');
                const projectName = this.getAttribute('data-name');
                
                if (confirm(`确定要删除项目 "${projectName}" 吗？此操作不可恢复！`)) {
                    // 执行删除操作
                    alert(`项目 "${projectName}" 已删除`);
                    // 实际删除操作需要与后端交互
                }
            });
        });
    </script>
</body>
</html>
